<template>
  <div class="TopHeader">
    <div class="left" style="display: flex;align-items: center">
      <img src="@/assets/logo-gw.png" style="width: 45px;height: 45px;margin:0 0 0 10px;" alt="">
      <!-- <img src="@/assets/logo_1.png" style="width: 45px;height: 45px;margin:0 0 0 10px;" alt=""> -->
      <div class="head-sysName">{{ sysConfig.sysTitle }}</div>
      <sysMenu @lableclick="lableclick" @collectclick="collectclick" class="head-menu">
        <span class="sysmenuicon iconkuangjia-gongnengcaidan"></span>
      </sysMenu>
      <!-- <svg class="icon svg-icon shouye-logo" aria-hidden="true" @click="linkTo()" style="cursor: pointer">
        <use xlink:href="#iconshouye"></use>
      </svg> -->
    </div>
    <div class="breadcrumb">
      <breadcrumb />
    </div>
    <div class="head-content">
      <div class="head-info">
        <div class="head-user head-info-div">
          <userMenu :menuitems="userinfo" @dropitemclick="useritemclick">
            <el-avatar v-if="user.headPic" :src="user.headPic" :size="100"
              style="width: 48px; height: 48px; margin-right: 13px; box-shadow: 0 0 4px rgba(255,255,255,0.5);border: 1px solid rgba(255,255,255,1);" />
            <span v-else class="iconfont user-icon">&#xe642;</span>
            {{ user.name }}
            <span class="iconkuangjia-xiala-small" style="
                font-family: 'iconfont';
                font-size: 12px;
                margin-left: 13px;
                cursor: pointer;
              "></span>
          </userMenu>
        </div>
        <!-- <div class="head-info-div head-info-divhover head-message">
          <helpMenu :menuitems="helpinfo" @dropitemclick="helpitemclick">
            <i class="iconfont iconhelp iconkuangjia-zhichi" />
            支持
          </helpMenu>
        </div> -->
        <div class="head-info-div head-message">
          <messageMenu @setMessage="setMessage">
            <!-- <el-badge :value="12" class="item"> -->
            <span class="iconfont iconMsg iconxiaoxizhongxin" />
            <!-- </el-badge> -->
            消息
          </messageMenu>
        </div>
        <!-- <div v-if="showdot" class="reddot"></div> -->
        <!-- <div class="head-info-div head-search">
          <div class="head-search-input">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            <el-select class="searchinput" popper-class="myselect" v-model="search" filterable remote reserve-keyword
              placeholder="请输入搜索内容" :remote-method="remoteMethod" :loading="loading" @change="link">
              <el-option class="headOption" v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
            <div class="split"></div>
            <el-select v-model="searchType" popper-class="myselect">
              <el-option class="headOption" v-for="(item, index) in searchOptions" :key="index" :label="item.name"
                :value="item.value"></el-option>
            </el-select>
          </div>
        </div> -->
        <!--<div class="head-info-div">
          <i class="el-icon-magic-stick skin" @click="changeSkin"></i>
        </div>-->
      </div>
    </div>
    <winPassWord v-if="showPassWord" @close="showPassWord = false" @ok="changePassWord"></winPassWord>
  </div>
</template>

<script>
import { helloTime } from "../../utils/public";
import { personalFuncs } from "@/system/api/sysApi";
import sysMenu from "../components/sysMenu.vue";
import messageMenu from "../components/messageMenu.vue";
import helpMenu from "../components/helpMenu.vue";
import userMenu from "../components/userMenu.vue";
import winPassWord from "../components/winPassWord.vue";
import { info } from "@/system/api/login";
import "@/assets/icons/iconfont";
import breadcrumb from "@/components/Breadcrumb/breadcrumb";

export default {
  name: "tophead",
  components: {
    sysMenu,
    messageMenu,
    helpMenu,
    userMenu,
    winPassWord,
    breadcrumb
  },
  data() {
    return {
      user: "admin",
      userinfo: [
        {
          name: "大明电建",
          iconname: "iconbumenxuanze-bumen",
          value: 1,
        },
        {
          name: "修改密码",
          iconname: "iconyonghu-xiugaimima",
          value: 2,
        },
        {
          name: "退出",
          iconname: "iconyonghu-tuichuxitong",
          value: 3,
        },
      ],
      helpinfo: [
        {
          name: "帮助文档",
          iconname: "iconzhichi-bangzhuwendang",
          value: 1,
        },
        {
          name: "问题提交",
          iconname: "iconzhichi-wentitijiao",
          value: 2,
        },
        {
          name: "APP下载",
          iconname: "iconerweima",
          value: 3
        },
      ],
      messagenum: 123,
      menus: [
        {
          lable: "标签1",
          menuitems: [
            { name: "测试页", path: "/test", collect: true },
            { name: "首页", path: "/home", collect: false },
            { name: "xxx", path: "/xxx", collect: false },
          ],
        },
        {
          lable: "标签1",
          menuitems: [
            { name: "测试页", path: "/test", collect: true },
            { name: "首页", path: "/home", collect: false },
            { name: "xxx", path: "/xxx", collect: false },
          ],
        },
        {
          lable: "标签1",
          menuitems: [
            { name: "测试页", path: "/test", collect: true },
            { name: "首页", path: "/home", collect: false },
            { name: "xxx", path: "/xxx", collect: false },
          ],
        },
      ],
      visitedViews: [],
      hoverLeft: 0,
      hoverWidth: 0,
      searchOptions: [
        { name: "模块", value: 1 },
      ],
      searchType: 1,
      search: null,
      options: [],
      loading: false,
      show: "help",
      skinValue: true,
      showdot: false,
      showPassWord: false,
    };
  },
  computed: {
    timetext: function () {
      return helloTime();
    },
    numtext: function () {
      if (this.messagenum < 100) {
        return this.messagenum;
      } else {
        return "99+";
      }
    },
    divnumleft: function () {
      if (this.messagenum < 100) {
        return 26;
      } else {
        return 34;
      }
    },
    divnumright: function () {
      if (this.messagenum < 100) {
        return 323;
      } else {
        return 315;
      }
    },
  },
  methods: {
    linkTo() {
      const func = {
        path: "/home",
        title: "首页",
      };
      this.$router.push(func);
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        let arr = [];
        personalFuncs({ name: query }).then((res) => {
          this.loading = false;
          if (res.success) {
            for (let i = 0; i < res.info.length; i++) {
              let funcList = res.info[i].funcList;
              for (let j = 0; j < funcList.length; j++) {
                let obj = funcList[j];
                arr.push(obj);
              }
            }
            this.options = arr;
          }
        });
      } else {
        this.options = [];
      }
    },
    link(e) {
      let func = null;
      for (let i = 0; i < this.options.length; i++) {
        let item = this.options[i];
        if (item.id == e) {
          func = item;
        }
      }
      if (func) {
        this.handleSelect(func);
        this.options = [];
      }
    },
    handleSelect(func) {
      this.search = func.value;
      if (func.wmName == null) {
        this.message(func.name + "找不到路径,请刷新菜单!", 3);
        return;
      }
      const path = func.wmName;
      const name = "templatePage";
      const index = path.indexOf(name);
      let item
      if (index !== -1) {
        const id = path.substr(index + name.length + 1, path.length);
        const title = path.substr(index + 4 + name.length + 1);
        item = {
          path: "/t" + id + "/:id",
          name: "t" + id,
          title: func.name,
          funcId: func.id
        }
      } else {
        item = {
          path: func.wmName,
          title: func.name,
          funcId: func.id
        }
      }
      this.linkClick(item)
    },
    getInfo() {
      let baseurl = this.api + "/";
      info().then((res) => {
        if (res.success) {
          this.$store.commit("SET_USERINFO", res.info);
          this.user = res.info;
          if (res.info.headPic != null) {
            this.$set(this.user, "headPic", baseurl + res.info.headPic);
          } else {
            this.$set(this.user, "headPic", null);
          }

          this.userinfo[0].name = res.info.deptName;
        }
      });
    },
    helpinfoclick(e) {
      this.message(e.name, 1);
    },
    messageinfoclick(e) {
      this.message(e.name, 1);
    },
    collectclick(e) {
      this.message(e.name, 1);
    },
    lableclick(e) {
      this.message(e.name, 1);
    },
    coloseMenu() {
      setTimeout(() => {
        this.show = null;
      }, 100);
    },
    setshow(e) {
      if (e) {
        //					this.$refs.user.popperElm.children[3].style.marginTop = "0";
        let div = this.$refs.user.popperElm.getElementsByClassName(
          "popper__arrow"
        );
        // console.log(div.length);
      }
    },
    useritemclick(e) {
      if (e.name == "退出") {
        this.$store.dispatch("LogOut");
      }
      if (e.name == '修改密码') {
        this.showPassWord = true;
      }
    },
    //  messageitemclick(e) {
    //    this.message(e);
    //  },
    helpitemclick(e) {
      if (e.value == 2) {
        let func = {
          id: 1331,
          code: "problems",
          name: "问题提交",
          wmName: "/templatePage/1383",
        };
        const path = func.wmName;
        const name = "templatePage";
        const index = path.indexOf(name);
        if (index !== -1) {
          const id = path.substr(index + name.length + 1, path.length);
          const routes = [
            {
              path: "/t" + id + "/:id",
              name: "t" + id,
              component: () => import("@/system/pages/customPage/templatePage"),
              props: true,
              meta: {
                title: func.name,
                keepAlive: false,
                funcId: func.id,
              },
              children: [],
            },
          ];
          let routerExist = false;
          this.routerMap.forEach((element) => {
            if (element === routes[0].name) {
              routerExist = true;
              return;
            }
          });
          if (!routerExist) {
            this.routerMap.push(routes[0].name);
            this.$router.addRoutes(routes);
            this.$router.options.routes.push(routes[0]);
          }
          this.$router.push("/t" + id + "/" + id);
        }
      } else if (e.value == 3) {
        this.$emit('appDownload', true)
      }
    },
    setMessage(e) {
      if (e > 0) {
        this.showdot = true;
      } else {
        this.showdot = false;
      }
    },
    changePassWord() {
      this.showPassWord = false;
    },
    changeSkin() {
      this.skinValue = !this.skinValue;
      this.$emit("changeSkin", this.skinValue);
    },
  },
  mounted() {
    this.getInfo();
    // console.log(this.$refs);//user.popperElm.children[3].style.borderWidth border-bottom-color top  -10  margin-top   border-bottom-color
  },
};
</script>

<style scoped>
.TopHeader {
  height: 100%;
  display: flex;
  z-index: 9;
  width: 100%;
  color: var(--head-text-color);
  background: var(--head-back-color);
  box-shadow: 10px 0px 20px 0px var(--head-boxshadow);
  font-size: 16px;
}

.headlogo {
  width: 247px;
  height: 78px;
}

.head-logo {
  /*font-size: 44px;*/
  /*font-family: "iconfont";*/
  /*display: inline-block;*/
  width: 200px;
  margin: 0 25px;
}

.shouye-logo {
  width: 25px;
}

.logo {
  height: 40px;
  width: 45px;
  margin-top: 5px;
}

.head-title-big {
  position: fixed;
  left: 82px;
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 12px;
  font-family: Source Han Sans CN;
  margin-top: -7px;
  color: var(--head-text-color);
}

.head-title-little {
  position: fixed;
  left: 67px;
  font-size: 12px;
  margin-top: 15px;
  color: var(--head-text-color);
}

.head-sysName {
  letter-spacing: 1px;
  color: var(--head-sys-text-color);
  height: 56px;
  width: 175px;
  font-family: FZZhengHeiS-EB-GB;
  font-weight: 400;
  text-align: left;
  margin-left: 10px;
}

.head-menu {
  height: 78px;
  margin-left: 28px;
}

.breadcrumb {
  flex-grow: 2;
  text-align: left;
}

.head-content {
  height: 100%;
  /* right: 0;
  top: 0;
  width: calc(100% - 500px); */
}

.head-info {
  height: 100%;
  display: flex;
  flex-direction: row-reverse;
}

/*消息 支持 用户信息  element组件样式*/
.el-dropdown {
  font-size: 16px;
  color: #fff;
}

.head-search {
  margin-right: 20px;
  display: flex;
  width: 323px;
  align-items: center;
}

/*自定义搜索框  样式*/
.head-search-input {
  display: flex;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: var(--head-search-back-color);
  padding-left: 20px;
  border-radius: 20px;
}

.head-search>>>.el-input__inner {
  background: var(--head-search-back-color);
  border: none;
  color: var(--head-search-text-color);
}

.head-search>>>input::-webkit-input-placeholder {
  color: var(--head-search-text-color) !important;
}

.head-search>>>input:-moz-placeholder {
  color: var(--head-search-text-color) !important;
}

.head-search>>>input::-moz-placeholder {
  color: var(--head-search-text-color) !important;
}

.head-search>>>input:-ms-input-placeholder {
  color: var(--head-search-text-color) !important;
}

.head-search>>>.el-select .el-input .el-select__caret {
  color: var(--head-search-text-color);
}

.head-search>>>.el-input__icon {
  color: var(--head-search-text-color);
}

/*搜索框分割线*/
.split {
  margin-top: 2px;
  border-right: 1px solid var(--head-search-split-color);
  width: 1px;
  height: 36px;
}

/*搜索框中的下拉框右边圆角*/
.head-search>>>.el-input--suffix .el-input__inner {
  width: 80px;
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
  background: var(--head-search-back-color);
  border: none;
}

.searchinput>>>.el-input--suffix .el-input__inner {
  width: 206px;
}

.el-dropdown-menu__item {
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.head-info-div {
  height: 100%;
}

.head-user {
  right: 0;
  margin-right: 20px;
  color: var(--head-text-color);
}

.head-message {
  width: 80px;
  margin-right: 0px;
  color: var(--head-text-color);
}

.head-message:hover {}

.user-icon {
  margin-right: 10px;
  width: 40px;
  height: 40px;
  background: #e8eef5;
  display: inline-block;
  line-height: 40px;
  border-radius: 50%;
}

.message-icon {
  margin-right: 5px;
}

.iconsize {
  font-size: 17px;
}

.reddot {
  width: 10px;
  height: 10px;
  background: rgba(255, 18, 123, 1);
  border: 1px solid rgba(255, 255, 255, 1);
  opacity: 0.8;
  border-radius: 50%;
  position: absolute;
  top: 27px;
  right: 294px;
}

.divnum {
  text-decoration: none;
  font-size: 12px;
  color: #ffffff;
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  background: #ff6600;
  border-radius: 8px;
  display: inline-block;
  position: fixed;
  top: 5px;
  /*position: relative;*/
  /*top: -12px;*/
  /*left: 30px;*/
  min-width: 13px;
  padding: 0px 2px;
}

.sysmenuicon {
  font-size: 19px;
  font-family: "iconfont";
  cursor: pointer;
}

.iconMsg {
  font-size: 26px;
}

.iconhelp {
  font-size: 17px;
}

.skin {
  font-size: 18px;
  color: var(--head-text-color);
  margin-right: 15px;
}

/*设置element下拉框 option 选项样式 */
>>>.el-select-dropdown__list {
  background: var(--win-page-back-color);
  box-shadow: 0px 10px 20px 0px var(--drop-menu-boxshadow-color);
  border-radius: 4px;
}

>>>.el-avatar>img {
  border-radius: 50%;
  width: 48px;
}
</style>
